<template>
  <div class="main">
    <a-layout :style="{ height: '100%', backgroundColor: 'transparent' }">
      <a-layout-content>
        <div class="main--con">
          <div class="main--left">
            <a-button
              type="primary"
              style="margin-bottom: 16px"
              @click="toggleCollapsed"
            >
              <MenuUnfoldOutlined v-if="collapsed" />
              <MenuFoldOutlined v-else />
            </a-button>
            <a-menu
              v-model:openKeys="openKeys"
              v-model:selectedKeys="selectedKeys"
              mode="inline"
              :inline-collapsed="collapsed"
              :items="items"
              @click="handleMenuClick"
            ></a-menu>
            <div class="qr--box"><a-qrcode :value="qrtext" :size="100" /></div>
          </div>
          <div class="main--right">
            <div class="main--head" :style="{ height: '64px' }">
              <div class="head--left">
                <a-breadcrumb :routes="routes"> </a-breadcrumb>
              </div>
              <div class="head--right">
                <div class="head--right--item">
                  <a-input-search placeholder="" style="width: 243px" />
                </div>
                <div class="head--right--item">
                  <SettingOutlined :style="{ fontSize: '20px' }" />
                </div>
                <div class="head--right--item">
                  <a-badge :count="8">
                    <MessageOutlined :style="{ fontSize: '20px' }" />
                  </a-badge>
                </div>
                <div class="head--right--item">
                  <a-dropdown>
                    <a-avatar :src="avatarSrc" />
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <a href="javascript:;">关于</a>
                        </a-menu-item>
                        <a-menu-item>
                          <span @click="logout">退出登录</span>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
              </div>
            </div>
            <div class="main--content"><router-view /></div>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  GlobalOutlined,
  CloudSyncOutlined,
  CloudUploadOutlined,
  DatabaseOutlined,
  LineChartOutlined,
  MessageOutlined,
  SettingOutlined,
  RobotOutlined,
} from "@ant-design/icons-vue";
import { h } from "vue";
import touxiang from "../assets/touxiang.jpg";
export default {
  name: "Main",
  data() {
    return {
      avatarSrc: touxiang,
      collapsed: false,
      selectedKeys: ["1"],
      openKeys: ["1"],
      preOpenKeys: ["1"],
      qrtext: "123456789",
      items: [
        {
          key: "1",
          icon: () => h(GlobalOutlined),
          label: "首页",
          title: "首页",
          name: "home",
        },
        {
          key: "2",
          icon: () => h(CloudSyncOutlined),
          label: "导入数据",
          title: "导入数据",
          name: "importData",
        },
        {
          key: "3",
          icon: () => h(CloudUploadOutlined),
          label: "导出数据",
          title: "导出数据",
          name: "exportData",
        },
        {
          key: "4",
          icon: () => h(DatabaseOutlined),
          label: "查看数据",
          title: "查看数据",
          name: "viewData",
        },
        {
          key: "5",
          icon: () => h(LineChartOutlined),
          label: "分析数据",
          title: "分析数据",
          name: "analyzeData",
        },
        {
          key: "6",
          icon: () => h(RobotOutlined),
          label: "AI诊断",
          title: "AI诊断",
          name: "ai",
        },
      ],
      routes: [
        {
          path: "/",
          breadcrumbName: "main",
        },
        {
          path: "/home",
          breadcrumbName: "home",
          children: [
            {
              path: "/importData",
              breadcrumbName: "importData",
            },
            {
              path: "/exportData",
              breadcrumbName: "exportData",
            },
            {
              path: "/viewData",
              breadcrumbName: "viewData",
            },
            {
              path: "/analyzeData",
              breadcrumbName: "analyzeData",
            },
          ],
        },
      ],
    };
  },
  components: {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    GlobalOutlined,
    CloudSyncOutlined,
    CloudUploadOutlined,
    DatabaseOutlined,
    LineChartOutlined,
    MessageOutlined,
    SettingOutlined,
    RobotOutlined,
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
      this.openKeys = this.collapsed ? [] : this.preOpenKeys;
    },
    logout() {
      this.$router.push({ name: "login" });
    },
    handleMenuClick(e) {
      const { item } = e;
      this.$router.push({ name: item.name });
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100vw;
  height: 100vh;
  position: relative;
  .main--con {
    width: 100%;
    height: 100%;
    display: flex;
  }
  .main--left {
    height: 100%;
    width: 256px;
    padding: 10px 10px;
    position: relative;
    .qr--box {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 20px;
    }
  }
  .main--head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .head--right {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .head--right--item {
        margin-left: 20px;
      }
    }
  }
  .main--right {
    height: 100%;
    width: calc(100% - 256px);
    background-color: #f4f3ef;
    box-sizing: border-box;
    padding: 0 15px 15px 15px;
    .main--content {
      width: 100%;
      height: calc(100% - 64px);
    }
  }
}
</style>
